<template>
	<a-card class="general-card" :title="$t('userInfo.title.latestActivity')">
		<!-- <template #extra>
      <a-link>{{ $t('userInfo.viewAll') }}</a-link>
    </template> -->
		<a-list :bordered="false">
			<a-list-item v-for="activity in activityList" :key="activity.username" action-layout="horizontal">
				<a-skeleton v-if="loading" :loading="loading" :animation="true" class="skeleton-item">
					<a-row :gutter="6">
						<a-col :span="2">
							<a-skeleton-shape shape="circle" />
						</a-col>
						<a-col :span="22">
							<a-skeleton-line :widths="['40%', '100%']" :rows="2" />
						</a-col>
					</a-row>
				</a-skeleton>
				<a-list-item-meta v-else :title="activity.username" :description="activity.context">
					<template #avatar>
						<a-avatar>
							<img :src="processFilePath(activity.avatarUrl)" />
						</a-avatar>
					</template>
				</a-list-item-meta>
			</a-list-item>
		</a-list>
	</a-card>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { MyTeamDynamic, showDynamic } from '@/api/user-center';
	import useLoading from '@/hooks/loading';
	import { processFilePath } from '@/utils/get-img';


	const { loading, setLoading } = useLoading(true);
	const activityList = ref<MyTeamDynamic[]>(new Array(7).fill({}));
	const fetchData = async () => {
		try {
			const { data } = await showDynamic();
			activityList.value = data;
		} catch (err) {
			// you can report use errorHandler or other
		} finally {
			setLoading(false);
		}
	};
	fetchData();
</script>

<style scoped lang="less">
	.latest-activity {
		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.general-card :deep(.arco-list-item) {
		padding-left: 0;
		border-bottom: none;

		.arco-list-item-meta-content {
			flex: 1;
			padding-bottom: 27px;
			border-bottom: 1px solid var(--color-neutral-3);
		}

		.arco-list-item-meta-avatar {
			padding-bottom: 27px;
		}

		.skeleton-item {
			margin-top: 10px;
			padding-bottom: 20px;
			border-bottom: 1px solid var(--color-neutral-3);
		}
	}
</style>